<template>
  <!--商城-->
  <div>
    <swiper :sliderList="sliderList"></swiper>
    <p class="msg"><img src="../../assets/scsearch.png" alt="" width="40" @click="goSearchGoods()">
      <router-link to="/gouwuche"><img src="../../assets/gouwuche.png" alt="" width="40"></router-link>
    </p>
    <div class="swiper-content" style="height:auto">
      <div class="swiper-wrapper">
        <div class="swiper-slide cata" v-if="navigateList.length>0">
          <ul>
            <li v-for="(item,index) in navigateList" v-if="index<5">
              <p>
                <router-link :to="{path:item.categoryUrl,query:{categoryId:item.categoryId}}"><img
                  :src="item.categoryIcon | imgPathFilter" alt="" width="41"></router-link>
              </p>
              {{item.categoryName}}
            </li>
          </ul>
        </div>
        <div class="swiper-slide cata" v-if="navigateList.length>5">
          <ul>
            <li v-for="(item,index) in navigateList" v-if="index>=5">
              <p>
                <router-link :to="item.categoryUrl"><img :src="item.categoryIcon | imgPathFilter" alt="" width="41">
                </router-link>
              </p>
              {{item.categoryName}}
            </li>
          </ul>
        </div>
      </div>
      <div class="swiper-pagination" v-if="navigateList.length>5"></div>
    </div>
    <more :lookMore="lookMore" :advList="advList" :recommendList="recommendList" :moreParams="moreParams"
          :isOld="isOld"></more>
    <wv-tabbar :fixed=true>
      <wv-tabbar-item to="/index">
        <img class="weui-tabbar__icon" src="../../assets/selecthome.png" slot="icon">
        主页
      </wv-tabbar-item>
      <wv-tabbar-item to="/saoma">
        <img class="weui-tabbar__icon" src="../../assets/saoma.png" slot="icon">
        扫码验证
      </wv-tabbar-item>
      <wv-tabbar-item to="/shangcheng" is-on>
        <img class="weui-tabbar__icon" src="../../assets/selectthree.png" slot="icon">
        商城
      </wv-tabbar-item>
      <wv-tabbar-item to="/order">
        <img class="weui-tabbar__icon" src="../../assets/zhangdan.png" slot="icon">
        订单
      </wv-tabbar-item>
      <wv-tabbar-item to="/my">
        <img class="weui-tabbar__icon" src="../../assets/my.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>
  </div>
</template>

<script type="text/ecmascript-6">
  import swiper from '../offertemplate/swipertemplate'
  import more from '../offertemplate/tuijianmore'
  import {initMallData} from '../../../test/unit/http'

  export default {
    name: 'shangcheng',
    props: {},
    data() {
      return {
        sliderList: [],
        navigateList: [],
        advList: [],
        recommendList: [],
        moreParams: {entrySource: 'shop'},
        lookMore: '更多',
        isOld: false
      };
    },
    methods: {
      getMallData() {
        initMallData({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            let data = res.object;
            this.sliderList = data.sliderList;
            this.navigateList = data.navigateList;
            this.advList = data.advList;
            this.recommendList = data.recommendList;
            this.isOld = data.isOld;
            /* console.log('商城数据  ' + JSON.stringify(res.object))*/
          }
        })
      },
      goSearchGoods() {
        this.$router.push({path: 'searchgoods'})
      }
    },
    created() {
      this.getMallData();
    },
    mounted() {
    },
    components: {
      swiper,
      more
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .msg {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2;
  }

  .cata {
    ul {
      display: flex;

      li {
        flex: 1;
        p {
          height: 40px;
        }
      }
    }
  }

  .swiper-content {
    position: relative;
    height: 100px;
    overflow: hidden;
  }
</style>
